<template>
    <div class="page_container">
        <div class="hello">{{hello}}</div>
        <div class="everydayWord">{{everydayWord}}</div>

        <div class="moment">
            <div class="moment-title">
                在想什么呢？
                <span class="gomgt">管理</span>
            </div>
            <a-textarea class="moment-input" v-model:value="moment.content" :disabled="moment.loading" placeholder="记录你的心情吧" :rows="4" />
            <div class="btn-row">
                <a-popover
                    title="选择心情"
                    trigger="hover"
                    placement="right">
                    <div slot="content" class="emoji-inner">
                        <img
                            v-for="(v, k) in emoji.list"
                            :key="k"
                            :src="emoji.icon[v.key]"
                            :alt="v.key"
                            @click="onEmojiClick(v, emoji.icon[v.key])"
                        />
                    </div>
                    <div class="emoji">
                        <img
                            v-if="emoji.currIcon.icon !== null"
                            :src="emoji.currIcon.icon"
                            @click="emoji.currIcon = {key: '', icon: null}"
                        />
                    </div>
                </a-popover>
                <a-button class="moment-btn" @click="sendMoment" :loading="moment.loading">发送</a-button>
            </div>
        </div>

        <div class="article">
            <a-descriptions title="博客统计" :column="3">
                <a-descriptions-item label="总文章数">
                    {{ articleStatistic.articleTotal }}
                </a-descriptions-item>
                <a-descriptions-item label="本月文章数">
                    {{ articleStatistic.articleMonth }}
                </a-descriptions-item>
                <a-descriptions-item label="今年文章数">
                    {{ articleStatistic.articleYear }}
                </a-descriptions-item>
            </a-descriptions>
            <a-descriptions :column="1">
                <div title=""></div>
            </a-descriptions>
        </div>
        <div class="visit">
            <a-descriptions title="访问量统计" :column="4">
                <a-descriptions-item label="总访问量">
                    {{ visitStatistic.totalVisit }}
                </a-descriptions-item>
                <a-descriptions-item label="今天访问量">
                    {{ visitStatistic.todayVisit }}
                </a-descriptions-item>
                <a-descriptions-item label="本月访问量">
                    {{ visitStatistic.thisMonthVisit }}
                </a-descriptions-item>
                <a-descriptions-item label="今年访问量">
                    {{ visitStatistic.thisYearVisit }}
                </a-descriptions-item>
            </a-descriptions>
        </div>
        <div class="visitLine">
            <a-descriptions :column="1" title="年度访问量折线图">
                <div title=""></div>
            </a-descriptions>
            <div id="visitLine"></div>
        </div>
        <div class="ip">
            <a-descriptions title="最常访问 ip Top 10" :column="1">
                <a-descriptions-item v-for="(v, k) in visitStatistic.ipTop10" :key="k" :label="v.ip">
                    {{ v.c }} 次
                </a-descriptions-item>
            </a-descriptions>
        </div>
    </div>
</template>
<script>
import { dashboard } from '@/api/dashboard'
import {getSetting} from "@/api/setting"

import * as echarts from 'echarts'

export default {
    name: 'Dashboard',
    data() {return {
        hello: '',
        everydayWord: '',
        moment: {
            content: '',
            loading: false
        },
        visitStatistic: {
            yearHeatGrap: [],
            monthHeatGrap: [],
            thisMonthVisit: 0,
            thisYearVisit: 0,
            todayVisit: 0,
            totalVisit: 0,
            ipTop10: []
        },
        articleStatistic: {
            articleTotal: 0,
            articleMonth: 0,
            articleYear: 0
        },
        emoji: {
            list: [],
            icon: {
                cloudy: require('@/assets/cloudy.png'),
                happyapple: require('@/assets/happyapple.png'),
                love: require('@/assets/love.png'),
                sad: require('@/assets/sad.png'),
                shit: require('@/assets/shit.png'),
                skull: require('@/assets/skull.png'),
                sunny: require('@/assets/sunny.png')
            },
            currIcon: {
                key: '',
                icon: null
            }
        },
    }},
    mounted() {
        this.getData()
        this.getHello()
        this.getSetting()
    },
    methods: {
        onEmojiClick(v, icon) {
            this.emoji.currIcon = {
                key: v.key,
                icon: icon
            }
        },
        getSetting() {
            getSetting({
                types: 'category'
            }).then(res => {
                const setting = res.data.find(v => v.type === 'category')
                this.emoji.list = setting ? JSON.parse(setting.value).find(v => v.key == 'EMOJI').children : []
            }).catch(e => {
                console.error(e)
                this.$message.error(e.msg || '暂未配置')
            })
        },
        sendMoment() {

        },
        getHello() {
            const d = new Date()
            const hour = d.getHours()
            if (hour >= 4 && hour < 9) {
                this.hello = '早呀 !'
            } else if (hour >= 9 && hour < 11) {
                this.hello = '上午好 !'
            } else if (hour >= 11 && hour < 13) {
                this.hello = '午安 ~'
            } else if (hour >= 13 && hour < 17) {
                this.hello = '下午好 ~'
            } else if (hour >= 17 && hour < 19) {
                this.hello = '吃了没？'
            } else if (hour >= 19 && hour < 23) {
                this.hello = '晚上好~'
            } else if (hour >= 23 || hour < 4) {
                this.hello = '夜深了...'
            } else {
                this.hello = '你电脑的表好像坏了？'
            }
        },
        getData() {
            dashboard({}).then(res => {
                this.everydayWord = res.data.everydayWord
                this.visitStatistic = res.data.visitStatistic
                this.articleStatistic = res.data.articleStatistic
                this.drawVivitLine()
            })
        },
        drawVivitLine() {
            const option = {
                xAxis: {
                    type: 'category',
                    data: this.visitStatistic.yearHeatGrap.map(v => v.create_date)
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: this.visitStatistic.yearHeatGrap.map(v => v.c),
                        type: 'line'
                    }
                ]
            }
            let grap = echarts.init(document.getElementById('visitLine'))
            grap.setOption(option)
        }
    }
}
</script>
<style lang="scss" scoped>
.page_container {
    display: flex;
    flex-direction: column;
    overflow-y: scroll !important;
    .hello {
        margin: 70px 0 0 50px;
        font-size: 3em;
        font-weight: 600;
        color: black;
    }
    .everydayWord {
        margin: 20px 50px 0 50px;
        font-size: 1em;
        font-weight: 500;
    }
    .moment {
        margin: 70px 0 0 50px;

        .moment-title {
            font-size: 2em;
            font-weight: 400;
            color: black;

            .gomgt {
                font-size: 13px;
                color: #4091F7;
                &:hover {
                    text-decoration: underline;
                    cursor: pointer;
                }
            }
        }
        .moment-input {
            margin-top: 20px;
        }

        .btn-row {
            display: flex;
            flex-direction: row;
            height: 100px;
            align-items: flex-start;
            margin-top: 20px;
            .emoji {
                width: 100px;
                height: 100px;
                border: dashed 1px gray;
                border-radius: 5px;
                cursor: pointer;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .moment-btn {
                margin-top: 10px;
                margin-left: 30px;
            }
        }
    }
    .visit {
        margin: 20px 50px 0 50px;
    }
    #heatGrap {
        width: 100%;
        min-height: 400px;
        margin-left: 20px;
    }
    .article {
        margin: 40px 50px 0 50px;
    }
    .visitLine {
        margin: 20px 50px 0 50px;
        #visitLine {
            width: 100%;
            min-height: 400px;
            margin-left: 20px;
        }
    }
    .ip {
        margin: 20px 50px 0 50px;
    }
}
.emoji-inner {
    width: 500px;
    min-height: 50px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    img {
        width: 100px;
        height: 100px;
        margin: 0 20px 20px 0;
        cursor: pointer;
    }
}
</style>
